<template>
  <div class="wrap">
    <el-dialog
      title="用户标签"
      :visible.sync="state"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="open"
    >
      <el-tag
        class="tag"
        v-for="(item,idx) in tagLists"
        :key="item.tag_id"
        :effect="index==idx?'dark':'plain'"
        @click="select(item,idx)"
      >{{item.tag_name}}</el-tag>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="close(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    addUserStateTag: {
      type: Boolean,
      default: false
    },
    tagLists: {
      type: Array,
      default: []
    },
    tagusidList:{
      type: Array,
      default: []
    }
  },
  computed: {
    state: {
      get() {
        this.index = null;
        return this.addUserStateTag;
      },
      set() {}
    }
  },
  data() {
    return {
      formLabelWidth: "140px",
      tagName: "",
      index: null,
      list:""
    };
  },
  methods: {
    close(e) {
      if (e) {
        let str = "";
        if (this.index) {
          str = this.tagLists[this.index].tag_id;
        }
        this.$emit("getUserTag",  { tag_id_list: str });
      } else {
        this.$emit("getUserTag");
      }
    },
    select(item, i) {
      this.index = i;
    },
    open(){
      this.list = this.tagLists
      if(this.tagusidList){
        this.tagusidList.map(m=>{
          this.list.map(item=>{
            if(m.tag_id==item.tag_id){
              // item.s
            }
          })
        })
      }
    }
  }
};
</script>
<style scoped>
.el-tag {
  margin-right: 10px;
  cursor: pointer;
}
</style>